<template>
  <el-dialog v-model="dialogVisible" title="消息" :before-close="handleClose">
    <div class="diaLog_content">
      <h1>{{ showData.title }}</h1>

      <div>
        <p>{{ showData.content }}</p>
      </div>
      <div class="publishTime">
        <p>
          发布时间:
          <span>{{ showData.publishTime }}</span>
        </p>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">删除信息</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineExpose } from "vue";
const dialogVisible = ref(false);
const showData = ref();
const show = (data: any) => {
  showData.value = data;
  dialogVisible.value = true;
};
const handleClose = (done: () => void) => {
  done();
};
defineExpose({
  dialogVisible,
  show,
});
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
.diaLog_content {
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;

  position: relative;
  height: 60vh;
  h1 {
    text-align: center;
  }
}
.publishTime {
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>
